<template>
  <div class="wrap">
    <div class="inHeader">
      <div class="left">
        <div class="search-item">

        </div>
      </div>
      <div class="right">
        <div class="search-item">
          <div style="display: inline-block; width: 300px;">
            <el-button size="large" type="primary" @click="setLevel">{{$t('table.inventoryLocation.设置库位层级')}}</el-button>
            <el-button size="large" type="primary" @click="createInventory">{{$t('table.inventoryLocation.+ 创建一级库位')}}</el-button>
          </div>
        </div>

      </div>
    </div>

    <div class="content">
      <div class="page-wrap">
        <!--:default-expand-all="true"-->
        <el-table
          v-loading="loading"
          :data="data"
          border
          row-key="id"
          :indent="42"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          :row-class-name="customRowClassName"
          v-tableHeight="{bottomOffset: 80}"
          height="100px"
          ref="tableData"
        >
          <el-table-column
            prop="name"
            :label="$t('table.inventoryLocation.库位编号')"
            align="left"
            min-width="100"
          >
            <template slot-scope="{row}">
              <span style="padding-left: 10px">{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="level_name"
            :label="$t('table.inventoryLocation.库位层级')"
            align="center"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="show_type"
            :label="$t('table.inventoryLocation.库位类型')"
            align="center"
            min-width="100"
          >
            <template slot-scope="{row}">
              <template v-if="row.show_type === 1">
                <span>{{$t('table.inventoryLocation.一件代发')}}</span>
              </template>
              <template v-if="row.show_type === 2">
                <span>{{$t('table.inventoryLocation.中转送仓')}}</span>
              </template>
              <template v-if="row.show_type === 3">
                <span>{{$t('table.inventoryLocation.官方仓直送')}}</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="sku_num"
            :label="$t('table.inventoryLocation.已绑定SKU数量')"
            align="center"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="species_num"
            :label="$t('table.inventoryLocation.库存SKU种数')"
            align="center"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="goods_num"
            :label="$t('table.inventoryLocation.库存商品数量')"
            align="center"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="orderId"
            :label="$t('table.inventoryLocation.操作')"
            align="left"
            min-width="100"
          >
            <template slot-scope="{row}">
              <template v-if="row.is_deposit_goods === false && levelData.length > row.level_num">
                <a type="primary" @click="createInventoryLocation(row)" style="color: #0099ff;">{{ $t('table.inventoryLocation.创建子库位') }}</a> |
              </template>
              <a type="primary" @click="saveInventoryLocation(row)" style="color: orange;">{{ $t('table.inventoryLocation.编辑库位') }}</a> |
              <a type="primary" @click="delInventoryLocation(row)" style="color: red;">{{ $t('table.inventoryLocation.删除') }}</a>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mgt10"
          @current-change="getData"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <!--提示创建库位层级设置-->
    <el-dialog
      :title="$t('table.inventoryLocation.提示')"
      :visible.sync="tipSetLevelDialog"
      width="470px"
      :close-on-click-modal="false"
    >
      <div style="margin-top: -10px; font-size: 16px; color: #7f7f7f;">
        <span>{{$t('table.inventoryLocation.使用库位管理首先要确认您的仓库库位需要有多少层级，设置完需要的层级后即可开始创建库位')}}</span>
      </div>
      <div slot="footer">
        <el-button size="large" type="primary" @click="setLevel">{{$t('table.inventoryLocation.马上设置')}}</el-button>
      </div>
    </el-dialog>

    <!--库位层级设置-->
    <el-dialog
      :title="$t('table.inventoryLocation.设置库位层级')"
      :visible.sync="setLevelDialog"
      width="600px"
      :close-on-click-modal="false"
      :before-close="closeSetLevelDialog"
    >
      <div style="margin-top: -20px; font-size: 16px; color: #7f7f7f;">
        <span>{{$t('table.inventoryLocation.库位层级就是设置当前仓库库位总共分多少级管理')}}</span>
        <br>
        <span v-html="$t('table.inventoryLocation.例如您的仓库库位需分四级，为：区域-货架-层次-货位')"></span>
        <br>
        <span>{{$t('table.inventoryLocation.此时，您需要在此页面新增设置区域、货架、层次、货位四个层级')}}</span>
      </div>

      <div
        style="margin-top: 20px; font-size: 20px; color: black;"
        v-for="(item, index) in levelData" :key="index"
      >
        <span>{{item.levelName}}</span>
        <div style="margin-top: 20px; margin-left: 20px; font-size: 18px;">
          <span>{{item.title}}：</span>
          <el-input style="width: 350px" v-model="item.name" :placeholder="item.placeholder"></el-input>
          <template v-if="index !== 0 && (index + 1) === levelData.length">
            <span style="margin-left: 10px; color: red; cursor: pointer;" @click="delLevel(index)">删除</span>
          </template>
        </div>
      </div>

      <div style="margin-top: 20px; margin-left: 110px;" v-if="levelData.length !== levelTemplateData.length">
        <el-button size="large" type="primary" @click="addLevelData(levelData, levelTemplateData)">{{$t('table.inventoryLocation.新增层级')}}</el-button>
      </div>

      <div slot="footer">
        <el-button size="large" @click="closeSetLevelDialog">{{$t('table.inventoryLocation.取消')}}</el-button>
        <el-button size="large" type="primary" @click="saveLevel" :loading="saveLevelLoading">{{$t('table.inventoryLocation.确定')}}</el-button>
      </div>
    </el-dialog>

    <!--库位设置-->
    <el-dialog
      :title="setInventoryLocationDataTitle"
      :visible.sync="setInventoryLocationDataDialog"
      width="1500px"
      :close-on-click-modal="false"
      :before-close="closeSetInventoryLocationDataDialog"
    >
      <div style="margin-top: -10px; font-size: 16px; color: black;">
        <template v-if="setInventoryLocationData.parent_id === 0">
          <div>
            <span>{{$t('table.inventoryLocation.库位层级')}}： {{setInventoryLocationData.level}}（{{setInventoryLocationData.levelName}}）</span>
          </div>
          <div class="mgt20">
            <span>{{$t('table.inventoryLocation.库位编号')}}：</span>
            <el-input style="width: 350px" v-model="setInventoryLocationData.name" maxlength="3" :placeholder="$t('table.inventoryLocation.请输入编号')" show-word-limit></el-input>
            <div style="color: #7f7f7f; font-size: 12px; margin-top: 10px; margin-left: 80px;">
              <span>{{$t('编号限长3个字符，如：A1')}}</span>
            </div>

            <template v-if="setInventoryLocationData.id === 0">
              <div v-for="(item, index) in setInventoryLocationData.addInventoryLocationDataName" :key="index">
                <el-input v-model="setInventoryLocationData.addInventoryLocationDataName[index].name" style="width: 350px; margin-left: 80px; margin-top: 10px;" maxlength="3" :placeholder="$t('table.inventoryLocation.请输入编号')" show-word-limit>{{ item.name }}</el-input>

                <i class="el-icon-remove mgl10" style="cursor: pointer; color: red; font-size: 20px; position: relative; top: 5px;" @click="removeInventoryLocationDataName(index)"></i>

              </div>

              <el-button
                size="mini"
                type="primary"
                style="margin-left: 80px; margin-top: 10px;"
                @click="addInventoryLocationDataName()"
              >
                +{{$t('table.inventoryLocation.添加更多库位')}}
              </el-button>
            </template>


          </div>
          <div class="mgt20">
            <span>{{$t('table.inventoryLocation.库位类型')}}：</span>
            <el-radio v-model="setInventoryLocationData.show_type" :label="1">{{$t('table.inventoryLocation.一件代发')}}</el-radio>
            <el-radio v-model="setInventoryLocationData.show_type" :label="2">{{$t('table.inventoryLocation.中转送仓')}}</el-radio>
            <el-radio v-model="setInventoryLocationData.show_type" :label="3">{{$t('table.inventoryLocation.官方仓直送')}}</el-radio>
          </div>
        </template>

        <template v-else>
          <div>
            <span>{{$t('table.inventoryLocation.上级库位层级')}}： {{setInventoryLocationData.parent_level}}（{{setInventoryLocationData.parent_levelName}}）</span>
          </div>
          <div class="mgt20" style="margin-bottom: 20px;">
            <span>{{$t('table.inventoryLocation.上级库位编号')}}： {{setInventoryLocationData.parent_name}}</span>
          </div>
          <hr style="border: 1px solid rgba(200, 200, 200, 0.3);">
          <div class="mgt20">
            <span>{{$t('table.inventoryLocation.子库位层级')}}： {{setInventoryLocationData.level}}（{{setInventoryLocationData.levelName}}）</span>
          </div>
          <div class="mgt20">
            <span>{{$t('table.inventoryLocation.子库位编号')}}：</span>
            <el-input style="width: 350px" v-model="setInventoryLocationData.name" maxlength="3" :placeholder="$t('table.inventoryLocation.请输入编号')" show-word-limit></el-input>
            <div style="color: #7f7f7f; font-size: 12px; margin-top: 10px; margin-left: 100px;">
              <span>{{$t('编号限长3个字符，如：A1')}}</span>
            </div>
          </div>

          <template v-if="setInventoryLocationData.id === 0">
            <div v-for="(item, index) in setInventoryLocationData.addInventoryLocationDataName" :key="index">
              <el-input v-model="setInventoryLocationData.addInventoryLocationDataName[index].name" style="width: 350px; margin-left: 98px; margin-top: 10px;" maxlength="3" :placeholder="$t('table.inventoryLocation.请输入编号')" show-word-limit>{{ item.name }}</el-input>

              <i class="el-icon-remove mgl10" style="cursor: pointer; color: red; font-size: 20px; position: relative; top: 5px;" @click="removeInventoryLocationDataName(index)"></i>

            </div>

            <el-button
              size="mini"
              type="primary"
              style="margin-left: 98px; margin-top: 10px;"
              @click="addInventoryLocationDataName()"
            >
              +{{$t('table.inventoryLocation.添加更多库位')}}
            </el-button>
          </template>

        </template>

        <template v-if="setInventoryLocationData.addInventoryLocationDataName.length <= 0">
          <div class="mgt20">
            <span>{{$t('table.inventoryLocation.库位商品')}}：</span>
            <el-switch v-model="setInventoryLocationData.is_deposit_goods" :disabled="setInventoryLocationData.sub_num > 0" @click="getGoodsData()"></el-switch>
            <div style="margin-left: 80px; margin-top: 10px; font-size: 13px;">
              <div style="color: #7f7f7f">
                <span>{{$t('table.inventoryLocation.设置当前库位支持存放的商品')}}</span>
              </div>
              <div style="color: red; margin-top: 3px;">
                <span>{{$t('table.inventoryLocation.注意！设置库位商品即表示当前库位为最后一级，将无法再创建子库位')}}</span>
              </div>
            </div>
          </div>

          <template v-if="setInventoryLocationData.is_deposit_goods">
            <div class="mgt20">
              <div class="wrap">
                <div class="headers">
                  <div class="search-item">
                    <user-check-box v-model="goodsQueryParams.userIds" @change="goodsChangeOption" :filter-stop="true" @apiUserFinish="goodsChangeOption" :disdisabled="goodsLoading"></user-check-box>
                  </div>
                  <div class="search-item">
                    <div class="search-box">
                      <div class="left">
                        {{$t('table.inventoryLocation.当前已选择绑定SKU数量')}} {{selectIds.length}}
                      </div>
                      <div class="right">
                        <div style="display: inline-block" class="mgr20 mgb10">
                          <el-select
                            v-model="goodsQueryParams.inventoryLocationBindType"
                            :placeholder="$t('table.inventoryLocation.绑定状态')"
                            @change="goodsChangeOption"
                            style="width: 250px"
                            clearable
                          >
                            <el-option :label="$t('table.inventoryLocation.请选择绑定状态')" value=""></el-option>
                            <el-option :label="$t('table.inventoryLocation.已绑定当前')" :value="1"></el-option>
                            <el-option :label="$t('table.inventoryLocation.已绑定其他')" :value="2"></el-option>
                            <el-option :label="$t('table.inventoryLocation.未绑定')" :value="3"></el-option>
                          </el-select>
                        </div>
                        <div style="display: inline-block" class="mgr20 mgb10">
                          <el-input
                            size="small"
                            style="width: 280px; margin-right: 10px; margin-bottom: 10px"
                            v-model="goodsQueryParams.keyword"
                            :placeholder="$t('common.searchForCompleteListingIDorSKU')"
                            @keyup.enter.native="goodsChangeOption(true, 'search')"
                            clearable @clear="goodsChangeOption(false, 'clear')"
                          ></el-input>
                          <el-button size="small" type="primary" @click="goodsChangeOption(true, 'search')">{{ $t('common.search') }}</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="content" style="margin-top: -30px;">
                  <el-table
                    ref="goodsTable"
                    v-loading="goodsLoading"
                    :data="goodsFullData"
                    border
                    @sort-change="goodsHandleSortChange"
                  >
                    <el-table-column
                      prop="selected"
                      label=""
                      width="35"
                    >
                      <template v-slot="{row}">
                        <el-checkbox :value="selectIds.indexOf(row.id) !== -1" @change="selectedRow(row)"></el-checkbox>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="goodsImage"
                      :label="$t('table.productCover')"
                      align="center"
                      width="110"
                    >
                      <template slot-scope="{row}">
                        <div class="img-box img-one">
                          <img :src="row.image" alt="">
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="userAccount"
                      :label="$t('common.user')"
                      align="left"
                      width="100"
                      show-overflow-tooltip
                    >
                    </el-table-column>

                    <el-table-column
                      prop="title"
                      :label="$t('table.title')"
                      align="left"
                      min-width="150"
                    >
                      <template slot-scope="{row}">
                        <el-tooltip placement="top" :content="row.title">
                          <div class="title hidden-2">
                            {{ row.title }}
                          </div>
                        </el-tooltip>

                        <div class="goods-attr">
                        <span
                          v-for="attr in row.attributes"
                          :key="attr.name"
                          class="attr"
                          style="color: #7F7F7F;"
                        >
                        {{attr.name}} : {{attr.value}}
                        <span class="attr-link"> | </span>
                        </span>
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="goodsList"
                      :label="$t('table.ListingIDAndSKU')"
                      align="center"
                      min-width="150"
                    >
                      <template v-slot="{row}">
                        <div
                          v-for="goods in row.goodsList"
                          :key="goods.id"
                        >
                          <template v-if="goods.isTB">
                            {{$t('shipment.Not labeled')}}
                          </template>
                          <template v-else-if="goods.isSystemLabel">
                            {{$t('shipment.System label')}} ({{goods.sku}})
                          </template>
                          <template v-else>
                            {{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}
                          </template>
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="stockNum"
                      :label="$t('table.inventoryLocation.代发库存')"
                      align="center"
                      width="200"
                      sortable="custom"
                      :sort-orders="goodsSortOrders"
                    >
                      <template v-slot="{row}">
                        <div
                          v-for="goods in row.goodsList"
                          :key="goods.id"
                        >
                          <template v-if="goods.isTB">-</template>
                          <template v-else>
                            <stock-num
                              :stock-num="goods.sumStockNum"
                              :stock-list="goods.stockNumList"
                            >
                            </stock-num>
                          </template>
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="middleStockNum"
                      :label="$t('table.inventoryLocation.中转库存')"
                      align="center"
                      width="200"
                      sortable="custom"
                      :sort-orders="goodsSortOrders"
                    >
                      <template v-slot="{row}">
                        <div
                          v-for="goods in row.goodsList"
                          :key="goods.id"
                        >
                          <template v-if="goods.isSystemLabel">-</template>
                          <template v-else>
                            <stock-num
                              :stock-num="goods.sumMiddleStockNum"
                              :stock-list="goods.middleStockNumList"
                            >
                            </stock-num>
                          </template>
                        </div>
                      </template>
                    </el-table-column>

                    <el-table-column
                      prop="inventoryLocationStr"
                      :label="$t('table.inventoryLocation.绑定库位')"
                      align="center"
                      width="200"
                    >
                      <template slot-scope="{row}">
                        <span v-if="row.inventoryLocationStr">{{row.inventoryLocationStr}}</span>
                        <span v-else>-</span>
                      </template>
                    </el-table-column>

                  </el-table>

                  <div class="page-wrap" style="margin-top: 20px;">
                    <el-pagination
                      background
                      layout="total ,sizes , prev, pager, next, jumper"
                      :current-page.sync="goodsQueryParams.page"
                      :page-size="goodsQueryParams.pageSize"
                      :total="goodsTotal"
                      :page-sizes="[10, 20, 50, 100]"
                      @current-change="getGoodsData"
                      @size-change="goodsHandleSizeChange"
                    >
                    </el-pagination>
                  </div>

                </div>
              </div>
            </div>
          </template>
        </template>

      </div>

      <div slot="footer">
        <el-button size="large" @click="closeSetInventoryLocationDataDialog">{{$t('table.inventoryLocation.取消')}}</el-button>
        <el-button size="large" type="primary" @click="setInventoryLocationDataControls" :loading="setInventoryLocationDataLoading">{{$t('table.inventoryLocation.确定')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  getInventoryLocationList,
  saveInventoryLocationLevel,
  saveInventoryLocationData,
  delInventoryLocationData,
  detectionSwitching,
} from "@/api/inventoryLocation";
import {deepCopy} from "@/utils";
import UserCheckBox from "@/views/shipment/components/UserCheckBox";
import StockNum from "@/views/stock/components/StockNum.vue";
import {getStockGoodsList} from "@/api/stock";

export default {
  name: "inventoryLocationList",
  components: {
    UserCheckBox,
    StockNum,
  },
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
      },
      data: [],
      total: 0,
      //数据加载
      loading: false,
      //提示设置弹窗
      tipSetLevelDialog: false,
      //设置层级弹窗
      setLevelDialog: false,
      //是否设置了层级
      setLevelInfo: false,
      //层级数据
      levelData: [],
      //复制的层级数据
      copyLevelData: [],
      //设置层级确认按钮加载
      saveLevelLoading: false,
      //层级模板数据
      levelTemplateData: [
        {'levelName': this.$t('table.inventoryLocation.一级'), 'title': this.$t('table.inventoryLocation.层级名称'), 'placeholder': this.$t('table.inventoryLocation.名称限长两个字符，如：') + this.$t('table.inventoryLocation.区域'), 'levelNum': 1},
        {'levelName': this.$t('table.inventoryLocation.二级'), 'title': this.$t('table.inventoryLocation.层级名称'), 'placeholder': this.$t('table.inventoryLocation.名称限长两个字符，如：') + this.$t('table.inventoryLocation.货架'), 'levelNum': 2},
        {'levelName': this.$t('table.inventoryLocation.三级'), 'title': this.$t('table.inventoryLocation.层级名称'), 'placeholder': this.$t('table.inventoryLocation.名称限长两个字符，如：') + this.$t('table.inventoryLocation.层次'), 'levelNum': 3},
        {'levelName': this.$t('table.inventoryLocation.四级'), 'title': this.$t('table.inventoryLocation.层级名称'), 'placeholder': this.$t('table.inventoryLocation.名称限长两个字符，如：') + this.$t('table.inventoryLocation.货位'), 'levelNum': 4},
        // {'levelName': this.$t('table.inventoryLocation.五级'), 'title': this.$t('table.inventoryLocation.层级名称'), 'placeholder': this.$t('table.inventoryLocation.名称限长两个字符，如：') + this.$t('table.inventoryLocation.XX'), 'levelNum': 5},
      ],
      //创建库位弹窗
      setInventoryLocationDataDialog: false,
      //创建库位确认按钮加载
      setInventoryLocationDataLoading: false,
      //库位弹窗标题
      setInventoryLocationDataTitle: '',
      //创建库位模板数据
      setInventoryLocationData: {
        id: 0,
        //编号
        name: '',
        //是否存放库位商品
        is_deposit_goods: false,
        //层级
        levelNum: 1,
        //层级标识名称
        levelName: '',
        //层级名称
        level: '',
        //上级数据
        parent_id: 0,
        parent_name: '',
        parent_levelNum: '',
        parent_levelName: '',
        parent_level: '',

        //库位类型
        show_type: 1,
        //批量添加
        addInventoryLocationDataName: [],
      },
      //复制库位模板数据
      copySetInventoryLocationData: {},
      //库位商品数据搜索条件
      goodsQueryParams: {
        page: 1,
        pageSize: 10,
        keyword: '',
        userIds: [-1],
        inventoryLocationBindType: '',
        inventoryLocationID: '',
        tabType: 1,
      },
      copyGoodsQueryParams:{},
      //库位商品数据页加载
      goodsLoading: false,
      //商品数据
      goodsFullData: [],
      // 商品分页
      goodsTotal: 0,
      goods_is_search: false,
      selectIds: [],
      goodsSortOrders: ['descending', 'ascending', null],
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    // 获取库位数据
    getData() {
      this.loading = true
      this.selectIds = []
      this.setInventoryLocationData.selectIds = []
      getInventoryLocationList(this.queryParams)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.total = res.info.total
          this.levelData = res.info.setInventoryLocationLevelData
          if (this.levelData.length <= 0) {
            // 无数据则弹出提示并添加默认数据
            this.tipSetLevelDialog = true
            this.levelData = this.addLevelData(this.levelData, this.levelTemplateData)
          } else {
            // 有数据则添加对应的模版数据
            this.mergeLevelData(this.levelData, this.levelTemplateData)
            this.setLevelInfo = true
            // 获取一级库位的设置
            var findData = this.levelData.find(function(item) {
              return item.levelNum === 1;
            });
            this.setInventoryLocationData.level = findData.name
            this.setInventoryLocationData.levelName = findData.levelName
          }
          // 复制一份数据作为对比
          this.copyLevelData = deepCopy(this.levelData)
          this.copySetInventoryLocationData = deepCopy(this.setInventoryLocationData)
          this.copyGoodsQueryParams = deepCopy(this.goodsQueryParams)
        })
    },
    //修改一页显示的数据量
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.queryParams.page = 1
      this.getData()
    },
    // 打开设置库位层级
    setLevel() {
      this.tipSetLevelDialog = false
      this.setLevelDialog = true
      this.levelData = deepCopy(this.copyLevelData)
    },
    // 添加层级默认数据
    addLevelData(levelData, levelTemplateData) {
      // 如果levelData为空，则直接将levelTemplateData的第一个元素添加到levelData中
      if (levelData.length === 0) {
        levelData.push({
          levelName: levelTemplateData[0].levelName,
          title: levelTemplateData[0].title,
          placeholder: levelTemplateData[0].placeholder,
          levelNum: levelTemplateData[0].levelNum,
        });
        return levelData;
      }

      if (levelData.length !== levelTemplateData.length) {
        levelData.push({
          levelName: levelTemplateData[levelData.length].levelName,
          title: levelTemplateData[levelData.length].title,
          placeholder: levelTemplateData[levelData.length].placeholder,
          levelNum: levelTemplateData[levelData.length].levelNum,
        });
        return levelData;
      }

      return levelData;
    },
    // 合并层级默认数据
    mergeLevelData(levelData, levelTemplateData) {
      // 遍历数组一的每个元素
      levelData.forEach(function(item1) {
        // 在数组二中查找具有相同键值的元素
        var foundItem = levelTemplateData.find(function(item2) {
          return item2['levelNum'] === item1['level_num'];
        });

        // 如果找到匹配的元素，则将它的值添加到数组一的元素上
        if (foundItem) {
          for (var key in foundItem) {
            item1[key] = foundItem[key];
          }
        }
      });
    },
    // 删除层级
    delLevel(index) {
      this.levelData.splice(index, 1);
    },
    // 修改层级设置
    saveLevel(){
      if (this.levelData.length < this.copyLevelData.length) {
        this.$confirm(this.$t('table.inventoryLocation.如您删除了某个层级，该层级下的子库位也会一同删除，已绑定的SKU和库存会重新变为“未配置”状态。') + '<br><span style="color: red">' + this.$t('table.inventoryLocation.此操作不可逆，请谨慎操作！！！') + '</span>', this.$t('table.inventoryLocation.确定修改层级？'), {
          confirmButtonText: this.$t('table.inventoryLocation.确定'),
          cancelButtonText: this.$t('table.inventoryLocation.取消'),
          dangerouslyUseHTMLString: true
        }).then(() => {
          this.saveLevelControls()
        }).catch(res=>{
          // 点击了取消
        });
      } else {
        this.saveLevelControls()
      }

    },
    // 修改层级设置操作
    saveLevelControls(){
      this.saveLevelLoading = true
      saveInventoryLocationLevel({'levelData': this.levelData})
        .then(res=>{
          this.saveLevelLoading = false
          if (res.error === 0) {
            this.$successMessage(res.message)
            this.setLevelDialog = false
            this.getData()
          } else {
            this.$errorMessage(res.message)
          }
        })
    },
    // 关闭层级设置
    closeSetLevelDialog(){
      this.setLevelDialog = false
      this.levelData = deepCopy(this.copyLevelData)
    },
    // 关闭库位创建/修改弹窗
    closeSetInventoryLocationDataDialog(){
      this.setInventoryLocationDataDialog = false
      this.setInventoryLocationData = deepCopy(this.copySetInventoryLocationData)
      this.selectIds = []
    },
    // 创建一级库位
    createInventory() {
      if (!this.setLevelInfo) {
        // 无数据则弹出提示
        this.tipSetLevelDialog = true
        return false
      }
      this.setInventoryLocationDataTitle = this.$t('table.inventoryLocation.创建一级库位');
      this.setInventoryLocationData = deepCopy(this.copySetInventoryLocationData)
      this.selectIds = []
      this.setInventoryLocationDataDialog = true
      this.goodsQueryParams = deepCopy(this.copyGoodsQueryParams)
      this.getGoodsData()
    },
    // 创建子库位
    createInventoryLocation(row){
      // 获取库位的设置
      var rowData = this.levelData.find(function(item) {
        return item.levelNum === row.level_num;
      });
      if (rowData === undefined) {
        return false
      }
      // 获取下一级库位的设置
      var findData = this.levelData.find(function(item) {
        return item.levelNum === row.level_num + 1;
      });
      if (findData === undefined) {
        return false
      }
      this.setInventoryLocationDataTitle = this.$t('table.inventoryLocation.创建子库位');
      this.setInventoryLocationData = {
        id: 0,
        //编号
        name: '',
        //是否存放库位商品
        is_deposit_goods: false,
        //层级
        levelNum: findData.levelNum,
        //层级标识名称
        levelName: findData.levelName,
        //层级名称
        level: findData.name,
        //上级信息
        parent_id: row.id,
        parent_name: row.name,
        parent_levelNum: rowData.levelNum,
        parent_levelName: rowData.levelName,
        parent_level: rowData.name,

        //库位类型(与父级一致)
        show_type: row.show_type,
        //批量添加
        addInventoryLocationDataName: [],
      }
      this.selectIds = []
      this.setInventoryLocationDataDialog = true
      this.goodsQueryParams = deepCopy(this.copyGoodsQueryParams)
      this.getGoodsData()
    },
    // 修改库位
    saveInventoryLocation(row){
      // 获取库位的设置
      var rowData = this.levelData.find(function(item) {
        return item.levelNum === row.level_num;
      });
      if (rowData === undefined) {
        return false
      }
      this.setInventoryLocationData = {
        id: row.id,
        //编号
        name: row.name,
        //是否存放库位商品
        is_deposit_goods: row.is_deposit_goods,
        //层级
        levelNum: rowData.levelNum,
        //层级标识名称
        levelName: rowData.levelName,
        //层级名称
        level: rowData.name,
        //子级数量
        sub_num: row.sub_num,
        //上级信息
        parent_id: 0,
        //库位
        show_type: row.show_type,
        //批量添加
        addInventoryLocationDataName: [],
      }
      // 获取上一级库位的设置
      if (row.level_num - 1 > 0) {
        // 存在上级
        var findData = this.levelData.find(function(item) {
          return item.levelNum === row.level_num - 1;
        });
        if (findData === undefined) {
          return false
        }
        this.setInventoryLocationData.parent_id = row.parent_id
        this.setInventoryLocationData.parent_name = row.parent_name
        this.setInventoryLocationData.parent_levelNum = findData.levelNum
        this.setInventoryLocationData.parent_levelName = findData.levelName
        this.setInventoryLocationData.parent_level = findData.name
        this.setInventoryLocationDataTitle = this.$t('table.inventoryLocation.修改子库位');
      } else {
        this.setInventoryLocationDataTitle = this.$t('table.inventoryLocation.修改一级库位');
      }
      this.selectIds = deepCopy(row.selectIds)
      this.setInventoryLocationDataDialog = true
      this.goodsQueryParams = deepCopy(this.copyGoodsQueryParams)
      this.goodsQueryParams.inventoryLocationID = row.id
      this.getGoodsData()
    },
    // 创建修改库位操作
    setInventoryLocationDataControls(){
      this.setInventoryLocationDataLoading = true
      this.setInventoryLocationData.selectIds = this.selectIds
      const postData = {
        selectIds: this.setInventoryLocationData.selectIds,
        id: this.setInventoryLocationData.id,
      }
      // 检测是否换绑
      detectionSwitching(postData)
        .then(res=>{
            if (res.error === 0) {
              if (res.info.tipInfo === true) {
                this.$confirm(this.$t('table.inventoryLocation.当前勾选的部分SKU已绑定在其他库位，是否统一绑定到当前库位'), this.$t('table.inventoryLocation.请确认'), {
                  confirmButtonText: this.$t('table.inventoryLocation.确定'),
                  cancelButtonText: this.$t('table.inventoryLocation.取消'),
                  dangerouslyUseHTMLString: true
                }).then(() => {
                  this.saveInventoryLocationDataFor()
                }).catch(res=>{
                  // 点击了取消
                  this.setInventoryLocationDataLoading = false
                });
              } else {
                this.saveInventoryLocationDataFor()
              }
            } else {
              this.$errorMessage(res.message)
            }
        })
    },
    // 发起创建修改库位操作
    saveInventoryLocationDataFor(){
      saveInventoryLocationData(this.setInventoryLocationData)
        .then(res=>{
          this.setInventoryLocationDataLoading = false
          if (res.error === 0) {
            this.$successMessage(res.message)
            // 重置默认数据
            this.setInventoryLocationData = deepCopy(this.copySetInventoryLocationData)
            this.setInventoryLocationDataDialog = false
            this.goodsQueryParams = deepCopy(this.copyGoodsQueryParams)
            this.getData()
          } else {
            this.$errorMessage(res.message)
          }
        })
    },
    // 删除子库位
    delInventoryLocation(row){
      this.$confirm(this.$t('table.inventoryLocation.确定后不会删除当前库位绑定SKU的库存数量，仅会把这些库存变为“未配置”库位的状态。如您需要修改/删除库存，请前往【库存列表】页面操作') + '<br><span style="color: red">' + this.$t('table.inventoryLocation.此操作不可逆，请谨慎操作！！！') + '</span>', this.$t('table.inventoryLocation.确定删除库位吗？'), {
        confirmButtonText: this.$t('table.inventoryLocation.确定'),
        cancelButtonText: this.$t('table.inventoryLocation.取消'),
        dangerouslyUseHTMLString: true
      }).then(() => {
        delInventoryLocationData(row)
          .then(res=>{
            if (res.error === 0) {
              this.$successMessage(res.message)
              this.getData()
            } else {
              this.$errorMessage(res.message)
            }
          })
      }).catch(res=>{
        // 点击了取消
      });
    },
    // 获取商品数据
    getGoodsData(){
      this.goodsLoading = true
      getStockGoodsList(this.goodsQueryParams)
        .then(res=>{
          this.goodsLoading = false
          this.goodsFullData = deepCopy(res.data)
          this.goodsTotal = res.info.total
        })
    },
    // 优化商品页面的操作
    goodsChangeOption(is_search = false, type = ''){
      if (is_search === true) {
        //判断是否使用过搜索按钮
        this.goods_is_search = true
      }
      if (type === 'clear') {
        if (this.goods_is_search === false) {
          return
        } else {
          this.goods_is_search = false
        }
      }
      this.goodsQueryParams.page = 1;
      this.getGoodsData()
    },
    // 排序
    goodsHandleSortChange(column){
      this.goodsQueryParams.orderBy = '';
      this.goodsQueryParams.orderField = '';
      if(column.order){
        this.goodsQueryParams.orderBy = column.order;
        this.goodsQueryParams.orderField = column.prop
      }
      this.goodsChangeOption()
    },
    // 修改商品页面一页显示的数据量
    goodsHandleSizeChange(pageSize) {
      this.goodsQueryParams.pageSize = pageSize
      this.goodsQueryParams.page = 1
      this.getGoodsData()
    },
    // 商品页面的多选
    selectedRow(row){
      const index = this.selectIds.indexOf(row.id)
      if(index === -1){
        this.selectIds.push(row.id)
      }else{
        this.selectIds.splice(index, 1);
      }
    },
    // 为顶级库位行添加颜色
    customRowClassName({row}){
      if (row.parent_id <= 0) {
        return 'highlighted-row';
      }
      return '';
    },
    addInventoryLocationDataName(){
      // 添加新的数组元素
      this.setInventoryLocationData.addInventoryLocationDataName.push({
        requiredPop: `addInventoryLocationDataName${this.setInventoryLocationData.addInventoryLocationDataName.length + 1}`,
        name: '',
      });
      // console.log(this.setInventoryLocationData.addInventoryLocationDataName)
    },

    removeInventoryLocationDataName(index){
      // 删除数组元素
      this.setInventoryLocationData.addInventoryLocationDataName.splice(index, 1);
      // 重新排序 requiredPop 数据
      for (let i = index; i < this.setInventoryLocationData.addInventoryLocationDataName.length; i++) {
        const newIndex = i + 1;
        this.setInventoryLocationData.addInventoryLocationDataName[i].requiredPop = `addInventoryLocationDataName${newIndex}`;
      }
      // console.log(this.setInventoryLocationData.addInventoryLocationDataName)
    },

  },
}
</script>

<style>
.el-table .highlighted-row {
  background-color: #F5F7FA;
}
</style>
<style scoped lang="scss">
.wrap {
  padding: 30px 30px;
  .inHeader{
    display: flex;
    justify-content: space-between;
  }
  .headers{
    .search-item{
      margin-bottom: 15px;
      .search-box{
        display: flex;
        justify-content: space-between;
        .hidden-account-options {
          overflow: hidden;
          max-height: 29px;
        }
        .left{

        }
      }
    }
    .right{
      .search-form-item{
        position: relative;
        .search-button{
          position: absolute;
          right: 0;
        }
      }
    }
  }
  .content{
    padding: 20px 0 0;
  }
}
.header-select{
  margin-right: 20px;
}
.form-tips{
  font-size: 12px;
}
</style>
